import { observer } from "mobx-react";
import Dialog from "..";
import { WeaInput,WeaLocaleProvider } from "ecCom";
import AceEditor from 'react-ace';
const getLabel = WeaLocaleProvider.getLabel;

import 'brace/mode/html';
import 'brace/theme/tomorrow';

@observer
export default class CodeEditorDialog extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <Dialog
                dialog={store}
                className="edc-datasource-dialog"
                style={{ height: 400 }}
            >           
                <AceEditor
                    top ="100"
                    mode="html"
                    theme="tomorrow"
                    onChange={store.onChange}
                    value={store.currentCodeContent}
                    name="UNIQUE_CODEID_OF_DIV"
                    focus={"true"}
                    editorProps={{$blockScrolling: true}}
                    height = {"80%"}
                    width = {"100%"}
                />
            </Dialog>
        )
    }
}